<template>
    <div class="wrapper">
        <div class="status-bar" :style="{'height': statusBarHeight}"></div>
        <scroller loadmoreoffset="100">
            <minibar backgroundColor="#FF6600"
                     useDefaultReturn="false"
                     @wxcMinibarRightButtonClicked="minibarRightButtonClick">
                <text slot="left" class="iconfont" style="height: 32px;width: 32px; color: #ffffff;"> </text>
                <text style="font-size: 40px; color: #ffffff;" slot="middle">好券商城</text>
                <text slot="right" class="iconfont" style="height: 42px;width: 42px; color: #ffffff; font-size: 42px;" @click="minibarRightButtonClick">&#xe603;</text>
            </minibar>
            <div>
                <image @click="jump('yhq.search', {q:''}, {navShow: false})" src="bmlocal://assets/home-search.png" style="width: 750px; height: 330px;"></image>
            </div>
            <div class="icons-ctt">
                <div class="icon-row">
                    <div class="icon-item" @click="jump('yhq.list', {key: 1, cat: '16'}, {navShow: false})">
                        <text class="iconfont cat-icon">&#xe602;</text>
                        <text class="cat-name">女装</text>
                    </div>
                    <div class="icon-item" @click="jump('yhq.list', {key: 2, q:'男装'}, {navShow: false})">
                        <text class="iconfont cat-icon">&#xe601;</text>
                        <text class="cat-name">男装</text>
                    </div>
                    <div class="icon-item" @click="jump('yhq.list', {key: 9, q:'内衣'}, {navShow: false})">
                        <text class="iconfont cat-icon">&#xe710;</text>
                        <text class="cat-name">内衣</text>
                    </div>
                    <div class="icon-item" @click="jump('yhq.list', {key: 6, q:'美妆'}, {navShow: false})">
                        <text class="iconfont cat-icon">&#xe661;</text>
                        <text class="cat-name">美妆</text>
                    </div>
                    <div class="icon-item" @click="jump('yhq.list', {key: 7, cat:'50014812'}, {navShow: false})">
                        <text class="iconfont cat-icon">&#xe600;</text>
                        <text class="cat-name">母婴</text>
                    </div>
                </div>
                <div class="icon-row">
                    <div class="icon-item" @click="jump('yhq.list', {key: 10, cat:'50008090'}, {navShow: false})">
                        <text class="iconfont cat-icon">&#xe655;</text>
                        <text class="cat-name">数码</text>
                    </div>
                    <div class="icon-item" @click="jump('yhq.list', {key: 3, cat:'50006843'}, {navShow: false})">
                        <text class="iconfont cat-icon">&#xe668;</text>
                        <text class="cat-name">鞋包</text>
                    </div>
                    <div class="icon-item" @click="jump('yhq.list', {key: 8, q:'美食'}, {navShow: false})">
                        <text class="iconfont cat-icon">&#xe8f8;</text>
                        <text class="cat-name">美食</text>
                    </div>
                    <div class="icon-item" @click="jump('yhq.list', {key: 12, cat:'21'}, {navShow: false})">
                        <text class="iconfont cat-icon">&#xe630;</text>
                        <text class="cat-name">家居</text>
                    </div>
                    <div class="icon-item" @click="jump('yhq.list', {key: 100, q:'儿童玩具'}, {navShow: false})">
                        <text class="iconfont cat-icon">&#xe67d;</text>
                        <text class="cat-name">亲宝贝</text>
                    </div>
                </div>
            </div>

            <!--<div class="menu">
                <scroller class="menu-ctt" scroll-direction="row">
                    <text @click="selectMenu(1)" :class="['menu-item', menuSelected==1?'menu-active':'']">猜你喜欢</text>
                    <text @click="selectMenu(2)" :class="['menu-item', menuSelected==2?'menu-active':'']">热销</text>
                    <text @click="selectMenu(3)" :class="['menu-item', menuSelected==3?'menu-active':'']">9.9包邮</text>
                    <text @click="selectMenu(4)" :class="['menu-item', menuSelected==4?'menu-active':'']">19.9包邮</text>
                    <text @click="selectMenu(5)" :class="['menu-item', menuSelected==5?'menu-active':'']">优惠券</text>
                </scroller>
            </div>-->

            <div class="product-ctt">
                <div class="product-item" v-for="(item, idx) in items" :key="item.idx">
                    <div class="product-item-a" @click="jump('yhq.detail', item, {navTitle: item.title})">
                        <div>
                            <image :src="item.pictUrl" style="width: 200px; height: 200px; margin-top: 20px;"></image>
                        </div>
                        <div style="width: 530px; padding: 20px;">
                            <text class="product-title">{{item.title}}</text>
                            <div class="flex-row" style="margin-bottom: 15px;">
                                <div class="flex-row">
                                   <!-- <text class="label">现价 </text><text class="final_price">{{item.reservePrice}} </text>-->
                                </div>
                                <text class="volume label">已售{{item.volume}}件</text>
                            </div>
                            <div class="flex-row">
                                <div class="flex-row">
                                    <text class="label"><!--券后价--> </text><text class="qhPrice">¥{{item.reservePrice}}</text>
                                </div>
                                <div class="flex-row ">
                                    <div style="margin-right: 20px; margin-bottom: 4px;">
                                        <image v-if="item.userType == '天猫'" src="bmlocal://assets/tmall.png" style="width: 36px; height: 36px;"></image>
                                        <image v-if="item.userType == '淘宝'" src="bmlocal://assets/taobao.png" style="width: 36px; height: 36px;"></image>
                                    </div>
                                    <div class="flex-row quan-ctt">
                                        <!--<text class="quan-label">券</text>-->
                                        <text v-if="item.couponLeft > 0" class="quan-price">{{item.couponPrice}}</text>
                                        <text v-else class="quan-price">已抢完</text>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <loading class="loading" @loading="loadmore" :display="loadinging ? 'show' : 'hide'">
                <text class="indicator-text">Loading ...</text>
                <loading-indicator class="indicator"></loading-indicator>
            </loading>
        </scroller>
    </div>
</template>

<script>
    import yhq from '../../config/yhq';
    import util from '../../config/util';
    import minibar from '../../components/minibar';

    const catMap = {
        1: {q: '母婴'},
        2: {sort: 'tk_total_sales_des'},
        3: {type: 99},
        4: {type: 199},
        5: {type: 1, sort: 'tk_rate_desc'}
    };

    export default {
        data() {
            return {
                items:[],
                menuSelected: 1,
                pageNo: 0,
                keyword: '',
                cat: '',
                params: {/*cat: '50008165,56614002',*/ hasCoupon: true, sort: 'total_sales_desc'},
                newList: true,
                showLeftModal: false,
                curHomeBackTriggerTimes: 1,
                maxHomeBackTriggerTimes: 2,
                statusBarHeight: weex.config.statusBarHeight ? weex.config.statusBarHeight : 40,
                loadinging: false
            }
        },
        components:{
            minibar
        },
        created() {
            // this.loadItems({cat: '50008165,50354021,50074232'});
            // this.loadMaterial();
            util.initIconFont();
            this.androidFinishApp();
            this.loadCoupon();
            this.checkVersion();
        },
        backAppeared( params, options ){
            this.$notice.toast('出现')
            this.curHomeBackTriggerTimes = 1;
        },
        methods: {
            androidFinishApp() {
                const globalEvent = weex.requireModule('globalEvent');
                globalEvent.addEventListener('homeBack', options => {
                    if (this.curHomeBackTriggerTimes === this.maxHomeBackTriggerTimes) {
                        this.$router.finish();
                    } else {
                        this.curHomeBackTriggerTimes++;
                        this.$notice.toast({message: `再点一次应用将关闭`})
                    }
                })
            },
            /**
             * 检查版本
             */
            checkVersion(){
                console.log('检查版本');
                let self = this;
                const router = weex.requireModule('bmRouter');
                self.$storage.get('version_check_time').then(checkTime=>{
                    console.log(checkTime);
                    if(!checkTime || new Date().getTime() - checkTime > 86400){
                        updateAction();
                    } else {
                        // updateAction();
                        console.log('不检查更新');
                    }
                }, reject=>{
                    console.log('没有获取到上次检查版本时间');
                    updateAction();
                });
                let updateAction = function () {
                    self.$fetch({
                        method: 'GET',
                        url: yhq.versionServerUrl
                    }).then(resp => {
                        console.log(resp)
                        if(!resp.latestVersion){
                            // self.$notice.toast('检查版本失败');
                            return;
                        }
                        if(util.compareVersion(resp.latestVersion)){
                            self.$notice.confirm({
                                title: '检查版本',
                                message: `检测到新版本 ${resp.latestVersion}.\n\n${resp.description}\n\n确定要更新吗？`,
                                okTitle: '更新',
                                cancelTitle: '取消',
                                okCallback() {
                                    // 点击确认按钮的回调
                                    self.$storage.set('version_check_time', new Date().getTime()).then(resData => {}, error => {});
                                    router.openBrowser(resp.apk_url || resp.site);
                                },
                                cancelCallback() {
                                    // 点击取消按钮的回调
                                    // self.$notice.toast('不更新');
                                    self.$storage.set('version_check_time', new Date().getTime()).then(resData => {
                                        console.log(resData)
                                    }, error => {
                                        console.log(error)
                                    });
                                }
                            })
                        } else {
                            console.log('当前已经是最新版本');
                        }
                    });
                }
            },
            loadmore(event){
                console.log(event)
                this.loadinging = true;
                // this.loadItems();
                // this.loadMaterial();
                this.loadCoupon();
            },
            loadCoupon(){
                let self = this;
                let data = {
                    q: self.keyword,
                    cat: self.cat,
                    pageNo: self.pageNo,
                    pageSize: 40
                };
                if(self.params){
                    Object.assign(data, self.params);
                }
                console.log(data);
                this.$fetch({
                    method: 'GET',
                    url: `${yhq.serverUrl}/yhq/coupon/list?${util.toParams(data)}`
                }).then(resp => {
                    console.log(resp)
                    if(resp.code === 200){
                        let items = resp.res.content || [];
                        items.forEach(row => {
                            /*if(row.couponInfo){
                                let price = row.couponInfo.match(/\d+/ig);
                                if(price.length === 2 && row.zkFinalPrice - price[0] > 0){
                                    row.qhPrice = parseFloat(row.zkFinalPrice - price[1]).toFixed(2);
                                    row.quan = parseFloat(price[1]).toFixed(2);
                                } else {
                                    row.qhPrice = row.zkFinalPrice;
                                    row.quan = 0;
                                }
                            }*/
                        });
                        if(self.newList){
                            self.items = items;
                            self.newList = false;
                        } else {
                            items.forEach(item => {
                                self.items.push(item);
                            });
                        }
                        self.pageNo = self.pageNo + 1;
                    } else {
                        self.$notice.toast('没有获取到数据');
                    }
                    self.loadinging = false;
                }, err => {
                    console.log(error)
                    self.loadinging = false;
                })
            },
            minibarRightButtonClick(){
                this.jump('home', {}, '感谢媳妇');
            },
            selectMenu(idx){
                this.menuSelected = idx;
                this.pageNo = 0;
                this.newList = true;
                // if(idx === 1){
                //     this.guessLike();
                // } else {
                    this.loadItems(catMap[idx]);
                // }
            },
            jump(url, obj, more){
                this.$router.open(Object.assign({
                    name: url,
                    params: obj,
                    navTitle: obj.title
                }, more || {}))
            }
        }
    }
</script>

<style scoped>
    .status-bar {
        width: 750px;
        height: 40px;
        background-color: #ff6600;
    }
    .product-title{
        font-size: 28px;
        height: 72px;
        margin-bottom: 15px;
    }
    .final_price{
        font-size: 24px;
        color: #7d7d7d;
        text-decoration: line-through;
    }
    .quan-ctt{
        border-color: #ff6600;
        border-width: 1px;
        border-style: solid;
        background-color: #ffffff;
        color: #ff6600;
        border-radius: 8px;
    }
    .quan-label{
        background-color: #ff6600;
        color: #ffffff;
        font-size: 24px;
        padding: 5px;
    }
    .quan-price{
        font-size: 22px;
        padding: 6px;
        background-color: #ffffff;
        color: #ff6600;
        margin-left: 10px;
        margin-right: 10px;
    }
    .qhPrice{
        color: #ff6600;
        font-size: 36px;
    }
    .label{
        color: #7d7d7d;
        font-size: 24px;
    }
    .volume{
        font-size: 24px;
    }
    .mall{
        width: 58px;
        height: 58px;
    }
    .flex-row{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .iconfont{
        font-family: iconfont;
    }
    .product-ctt{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        justify-items: flex-start;
    }
    .product-item{
        /*width: 335px;*/
        padding-left: 10px;
        margin-bottom: 20px;
        background-color: #FFFFFF;
    }
    .product-item-a{
        flex-direction: row;
    }
    .buy_now{
        background-color: #ff4400;
        width: 120px;
        color: #ffffff;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 22px;
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .flex-row{
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 8px;
    }
    .icons-ctt{
        padding: 40px;
    }
    .icon-row{
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
     }
    .icon-item{
        flex-direction: column;
        align-items: center;
    }
    .cat-icon{
        font-size: 40px;
        border-radius: 80px;
        background-color: #1da1f2;
        padding: 20px;
        color: #FFFFFF;
    }
    .cat-name{
        margin-top: 15px;
        margin-bottom: 20px;
    }
    .menu-ctt{
        flex-direction: row;
        padding: 10px;
        background-color: #fad3dd;
    }
    .menu-item{
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        border-bottom-width: 4px;
        border-color: transparent;
    }
    .menu-active{
        border-color: #f8285c;
        color: #f8285c;
    }

    .loading {
        width: 750px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }
    .indicator-text {
        color: #888888;
        font-size: 42px;
        text-align: center;
    }
    .indicator {
        margin-top: 16px;
        height: 80px;
        width: 80px;
        color: blue;
    }
</style>
